<script setup>
import useElementInfo from "../../hooks/useElementInfo";
// 1引入three.js
import * as THREE from "three";
// 2、创建一个3维场景Scene; 你可以把三维场景Scene (opens new window)对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界。
const scene = new THREE.Scene();
// 3、创建一个长方体的集合对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 4、定义物体外观（材质）；不同材质渲染出来的效果不同 MeshBasicMaterial: 网格基础材质
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000, //0xff0000设置材质颜色为红色
});
// 5、物体：网格模型Mesh； 实际生活中有各种各样的物体，在threejs中可以通过网格模型mesh表示一个虚拟的物体，比如一个箱子，一个鼠标
const mesh = new THREE.Mesh(geometry, material); // 网格模型对象Mesh: 两个参数分别为几何体geometry、材质material
// 6、模型位置.position  实际生活中，一个物体往往是有位置的，对于threejs而言也是一样的，你可以通过位置属性.position定义网格模型Mesh在三维场景Scene中的位置。
//设置网格模型在三维空间中的位置坐标，默认是坐标原点

// 7、.add()方法 在threejs中你创建了一个表示物体的虚拟对象Mesh，需要通过.add()方法，把网格模型mesh添加到三维场景scene中。
scene.add(mesh);
mesh.position.set(0, 0, 0);

// 8、透视投影相机PerspectiveCamera
// Threejs提供了正投影相机OrthographicCamera (opens new window)和透视投影相机PerspectiveCamera (opens new window)。本节课先给大家比较常用的透视投影相机PerspectiveCamera。
// 透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律。
const camera = new THREE.PerspectiveCamera(
  30, // 垂直方向的观察角度
  window.innerWidth / window.innerHeight, // 观察百分百 width / height
  0.1, // 相机视锥体近裁截面相对相机距离	0.1
  2000 // 相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向	2000
);

// 9、相机位置.position
// 生活中用相机拍照，你相机位置不同，拍照结果也不同，threejs中虚拟相机同样如此。
// 比如有一间房子，你拿着相机站在房间里面，看到的是房间内部，站在房子外面看到的是房子外面效果。
// 相机对象Camera具有位置属性.position，通过位置属性.position可以设置相机的位置。

//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值
camera.position.set(200, 200, 200);

// 10、相机观察目标.lookAt()
// 你用相机拍照你需要控制相机的拍照目标，具体说相机镜头对准哪个物体或说哪个坐标。对于threejs相机而言，就是设置.lookAt()方法的参数，指定一个3D坐标。

//相机观察目标指向Threejs 3D空间中某个位置
// camera.lookAt(0, 0, 0); //坐标原点

// camera.lookAt(0, 10, 0);  //y轴上位置10

camera.lookAt(mesh.position); //指向mesh对应的位置
// PerspectiveCamera参数介绍：PerspectiveCamera( fov, aspect, near, far )

// 参数	含义	默认值
// fov	相机视锥体竖直方向视野角度	50
// aspect	相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height	1
// near	相机视锥体近裁截面相对相机距离	0.1
// far	相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向	2000
</script>
<template>
  <div>
    <h1>init</h1>
    <strong>{{ info }}</strong>
  </div>
</template>
